

<script type="text/javascript">
	
	var setting = {
		async: {
			enable : true, //设置启用异步加载
			url : '${cxt!}/departmentManage/treeData',//定义数据请求路径
			autoParam : ["id=ids"],//, "name=n", "level=lv"  //定义提交时参数的名称，=号前面标识节点属性，后面标识提交时json数据中参数的名称
			//otherParam : {"otherParam" : "zTreeAsyncTest"},
			dataFilter : filter,
			type : "post" //异步加载类型:post和get
		},
		view: {
			fontCss: getFont,
			expandSpeed:"",
			showIcon: false, //设置是否显示节点图标
			showLine: true, //设置是否显示节点与节点之间的连线
			selectedMulti: false //设置是否能够同时选中多个节点
		},
		data: {
			simpleData: {
				enable: true //设置是否启用简单数据格式
			}
		},
		callback: {
			onClick: zTreeOnClick,  //定义节点单击事件回调函数
// 			onDblClick: onDblClick, //定义节点双击事件回调函数
// 			onRightClick: OnRightClick, //定义节点右键单击事件回调函数
			
			beforeAsync: beforeAsync,	//用于捕获异步加载之前的事件回调函数,zTree 根据返回值确定是否允许进行异步加载
			onAsyncSuccess: onAsyncSuccess,	//用于捕获异步加载出现异常错误的事件回调函数
			onAsyncError: onAsyncError,	//用于捕获异步加载正常结束的事件回调函数
			
			onExpand: onExpand	//用于捕获节点被展开的事件回调函数
		}
	};
	
	function zTreeOnClick(event, treeId, treeNode) {
	    var url = "/userManage/userList";
		var data = { "_query.ids" : treeNode.id};
		
		var reData = common_ajax.ajaxFunc(url, data);
		$("#userTableList").html(reData);
	};

	//节点数据过滤
	function filter(treeId, parentNode, childNodes) {
		if (!childNodes) {
			return null;
		}
// 		for (var i=0, l=childNodes.length; i<l; i++) {
// 			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
// 		}
		return childNodes;
	}
	
	//字体设置
	function getFont(treeId, node) {
		return node.font ? node.font : {};
	}

	////////////////////下面是处理展开//////////////////
	
	//用于捕获异步加载之前的事件回调函数,zTree 根据返回值确定是否允许进行异步加载
	function beforeAsync() {
		curAsyncCount++;
	}
	
	//用于捕获异步加载出现异常错误的事件回调函数
	function onAsyncSuccess(event, treeId, treeNode, msg) {
		curAsyncCount--;
		if (curStatus == "expand") {
			expandNodes(treeNode.children);
		} else if (curStatus == "async") {
			asyncNodes(treeNode.children);
		}

		if (curAsyncCount <= 0) {
			if (curStatus != "init" && curStatus != "") {
				//$("#demoMsg").text((curStatus == "expand") ? "全部展开完毕" : "后台异步加载完毕");
				asyncForAll = true;
			}
			curStatus = "";
		}
	}

	//用于捕获异步加载正常结束的事件回调函数
	function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
		curAsyncCount--;

		if (curAsyncCount <= 0) {
			curStatus = "";
			if (treeNode!=null) asyncForAll = true;
		}
	}
	 
	var curStatus = "init", curAsyncCount = 0, asyncForAll = false, goAsync = false;
	function expandAll() {
		if (!check()) {
			return;
		}
		var zTree = $.fn.zTree.getZTreeObj("zTreeUserContent");
		if (asyncForAll) {
			//$("#demoMsg").text("已经异步加载完毕，使用 expandAll 方法");
			zTree.expandAll(true);
		} else {
			expandNodes(zTree.getNodes());
			if (!goAsync) {
				//$("#demoMsg").text("已经异步加载完毕，使用 expandAll 方法");
				curStatus = "";
			}
		}
	}
	
	function expandNodes(nodes) {
		if (!nodes) {
			return;
		}
		curStatus = "expand";
		var zTree = $.fn.zTree.getZTreeObj("zTreeUserContent");
		for (var i=0, l=nodes.length; i<l; i++) {
			zTree.expandNode(nodes[i], true, false, false);
			if (nodes[i].isParent && nodes[i].zAsync) {
				expandNodes(nodes[i].children);
			} else {
				goAsync = true;
			}
		}
	}

	function asyncAll() {
		if (!check()) {
			return;
		}
		var zTree = $.fn.zTree.getZTreeObj("zTreeUserContent");
		if (asyncForAll) {
			//$("#demoMsg").text("已经异步加载完毕，不再重新加载");
		} else {
			asyncNodes(zTree.getNodes());
			if (!goAsync) {
				//$("#demoMsg").text("已经异步加载完毕，不再重新加载");
				curStatus = "";
			}
		}
	}
	function asyncNodes(nodes) {
		if (!nodes) {
			return;
		}
		curStatus = "async";
		var zTree = $.fn.zTree.getZTreeObj("zTreeUserContent");
		for (var i=0, l=nodes.length; i<l; i++) {
			if (nodes[i].isParent && nodes[i].zAsync) {
				asyncNodes(nodes[i].children);
			} else {
				goAsync = true;
				zTree.reAsyncChildNodes(nodes[i], "refresh", true);
			}
		}
	}

	function reset() {
		if (!check()) {
			return;
		}
		asyncForAll = false;
		goAsync = false;
		//$("#demoMsg").text("");
		$.fn.zTree.init($("#treeDemo"), setting);
	}

	function check() {
		if (curAsyncCount > 0) {
			//$("#demoMsg").text("正在进行异步加载，请等一会儿再点击...");
			return false;
		}
		return true;
	}
	
	//用于捕获节点被展开的事件回调函数
	function onExpand(event, treeId, treeNode) {
		if (treeNode === autoExpandNode) {
			className = (className === "dark" ? "":"dark");
		}
	}

	function setTrigger() {
		var zTree = $.fn.zTree.getZTreeObj("zTreeUserContent");
		zTree.setting.edit.drag.autoExpandTrigger = $("#callbackTrigger").attr("checked");
	}

	//////////////////初始化////////////////////

	$(document).ready(function(){
		$.fn.zTree.init($("#zTreeUserContent"), setting);
		$("#callbackTrigger").bind("change", {}, setTrigger);	//拖拽节点时自动展开父节点是否触发

		//$("#expandAllBtn").bind("click", expandAll);	//全部展开
		//$("#asyncAllBtn").bind("click", asyncAll);	//背后展开
		//$("#resetBtn").bind("click", reset);	//重置
	});

	setTimeout(function(){
		expandAll();
	}, 500);
	
</script>

<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">

	<!-- BEGIN PAGE HEADER-->
	<div class="row-fluid">
		<div class="span12">
			<!-- BEGIN PAGE TITLE & BREADCRUMB-->
			<ul class="breadcrumb">
				<li><a href="javascript:void(0)" onclick="common_ajax.ajaxMainPanel('/index/content');"></a> <span class="divider">/</span></li>
				<li><a href="#">用户管理</a> <span class="divider">/</span></li>
				<li class="active"></li>
			</ul>
			<!-- END PAGE TITLE & BREADCRUMB-->
		</div>
	</div>
	<!-- END PAGE HEADER-->

	<!-- BEGIN PAGE CONTENT-->
	<div class="row-fluid">
		<div class="span3">
			<!-- BEGIN VALIDATION STATES-->
			<div class="widget red">
				<div class="widget-title">
					<h4>
						<i class=" icon-key"></i>
					</h4>
				</div>
				<div class="widget-body form">
					<ul id="zTreeUserContent" class="ztree"></ul>
				</div>
			</div>
			<!-- END VALIDATION STATES-->
		</div>
		
		<div class="span9">
			<!-- BEGIN VALIDATION STATES-->
			<div class="widget red">
				<div class="widget-title">
					<h4>
						<i class=" icon-key"></i>
					</h4>
				</div>
				<div id="userTableList">
				
				</div>
			</div>
			<!-- END VALIDATION STATES-->
		</div>
	</div>

	<!-- END PAGE CONTAINER-->
</div>